<template>
	<view class="container" :style="activityJson?.wrapper?.style">
		<!-- 活动名称 -->
		<view class="title" :style="activityJson?.title?.style">{{ vdata.activityDetail.activityName }}</view>
		<!-- 副标题 -->
		<view class="sub-title" :style="activityJson?.subtitle?.style">{{ activityJson?.subtitle?.text || '喜迎好礼连连来' }}</view>
		<!-- 内容 -->
		<view class="content" :style="activityJson?.content?.style">
			<!-- <image class="coin" src="https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/ebdeca72-518f-4c0c-b366-92c57d529b98.png"></image> --><!-- 右上角修饰金币 -->
			<view v-for="(item,index) in activityJson?.icons" :style="item?.style" class="coin"></view>
			<view class="act-title">天降邮喜</view>
			<view class="block" :style="activityJson?.award?.style1">
				<view class="top">
					<view class="left">
						<text>{{ vdata.awardDataAB.A.awardAliasPrice ? numberUtil.getFloatNumber(vdata.awardDataAB.A.awardAliasPrice / 100,2) : 0 }}</text>
						<text>元</text>
					</view>
					<view class="right">
						<view class="name">{{ vdata.awardDataAB.A.awardAliasName || '领取失败' }}</view>
						<view class="time">有效期{{ vdata.activityDetail.eTime }}</view>
					</view>
				</view>
				<view v-if="vdata.awardDataAB.A.fansAwardId" class="bottom">
					<button :style="activityJson?.btn?.style" plain @click="toUrl(`/pageUser/myCoupon/viewInfo?fansAwardId=${vdata.awardDataAB.A.fansAwardId}&couponId=${vdata.awardDataAB.A.awardId}`)">
						<template v-if="vdata.awardDataAB.A.state === 0">去使用</template>
						<template v-else-if="vdata.awardDataAB.A.state === 1">已使用</template>
						<template v-else-if="vdata.awardDataAB.A.state === 2">已过期</template>
						<template v-else-if="vdata.awardDataAB.A.state === 3">待激活</template>
						<template v-else>已失效</template>
					</button>
					<button :style="activityJson?.btn?.style" plain @click="toUrl(`/pageUser/myCoupon/mchList?couponId=${vdata.awardDataAB.A.awardId}`)">地图导航</button>
				</view>
			</view>
			<!-- 如果用户已实名不再展示实名奖品 -->
			<template v-if="vdata.fansInfo.isAuth != 0">
				<view class="act-title">实名认证</view>
				<view class="block" :style="activityJson?.award?.style1">
					<view class="top">
						<view class="left realname-coupon"></view>
						<view class="right">
							<view class="name">{{ vdata.awardDataAB.B.awardAliasName || '领取失败' }}</view>
							<view class="time">有效期{{ vdata.activityDetail.eTime }}</view>
						</view>
					</view>
					<view class="bottom">
						<button :style="activityJson?.btn?.style" plain @click="toUrl(`/pageUser/realName/index?activityId=${vdata.activityId}&activityTemplateNo=${vdata.activityDetail.activityTemplateNo}`)">去认证</button>
					</view>
				</view>
			</template>
			<view class="more-title">更多好礼</view>
			<view class="more-gift-list">
				<view class="more-gift-item" :style="activityJson?.award?.style2" v-for="item in vdata.moreGiftList" :key="item.img" @click="toUrl(item.url)">
					<image :src="item.img"></image>
					<view>{{ item.name + (item.awardAliasName || '') }}</view>
					<button v-if="item.fansAwardId" plain>
						<template v-if="item.awardType === 0">
							<template v-if="item.state === 0">去使用</template>
							<template v-else-if="item.state === 1">已使用</template>
							<template v-else-if="item.state === 2">已过期</template>
							<template v-else-if="item.state === 3">待激活</template>
							<template v-else>已失效</template>
						</template>
						<template v-else>
							<template v-if="item.state === 3">去领取</template>
							<template v-else-if="item.state === 1">已领取</template>
							<template v-else="item.state === 2">已过期</template>
						</template>
					</button>
				</view>
			</view>
		</view>
	</view>
	<!-- 授权登录弹窗 -->
	<gzLoginPopup ref="gzLoginPopupRef" v-model:isLogin="vdata.isLogin" @isLoginCallback="isLoginCallback"></gzLoginPopup>
</template>

<script setup>
	import { reactive, ref, getCurrentInstance } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { $activityTakePartIn, $getActivityAwards } from '@/http/apiManager.js'
	import storageManage from '@/util/storageManage.js'
	import dayjs from 'dayjs'
	import numberUtil from '@/util/numberUtil'
	
	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties
	
	const gzLoginPopupRef = ref()
	
	const vdata = reactive({
		isLogin: false,	// 用户是否登录
		fansInfo: {},	// 用户详情
		activityId: '',	// 活动id
		activityDetail: {},	// 活动详情
		awardDataAB:{ A:{}, B:{} },	// AB奖品数据
		moreGiftList: [	// 非AB奖品数据
			{ img: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/f28ba422-4ddd-46c8-9463-468fceec8178.png', name: '社保卡开卡-', remark: 'C' },
			{ img: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/be081227-b90e-45b2-b1d3-982f4ac1c1bb.png', name: '信用卡开卡-', remark: 'D' },
			{ img: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/ba155302-0ed2-4641-b26b-33654e32541e.png', name: '手机银行/快捷支付-', remark: 'E' },
			{ img: 'https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/6ab34edc-1dae-46bc-ab50-660dec980e45.png', name: '收单商户转介-', remark: 'F' },
		]
	})
	
	const activityJson = ref({
		"wrapper":{
			"style":{
				"background":"url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/08c5ac52-2f7d-463a-b238-c8fe823667d1.png') no-repeat top left / 750rpx 810rpx, #F63A18"
			}
		},
		"title":{
			"style":{
				"margin-top":"46rpx",
				"color":"#FEF3DD"
			}
		},
		"subtitle":{
			"text":"喜迎好礼连连来",
			"style":{
				"color":"#D63727"
			}
		},
		"content":{
			"style":{
				"margin-top":"466rpx",
				"background":"#fff"
			}
		},
		"btn":{
			"style":{
				"color":"#fff",
				"background":"#FFBF3B"
			}
		},
		"award":{
			"style1":{
				"width":"622rpx",
				"height":"274rpx",
				"background": "url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/808e0c65-7ef3-4a05-bdc4-b8d92bc910d6.png') no-repeat left top / 100% 100%"
			},
			"style2":{
				"background":"#FFF6DB"
			}
		},
		"icons":[
			{
				"style":{
					"width":"104rpx",
					"height":"100rpx",
					"right":"40rpx",
					"top":"530rpx",
					"background":"url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/ebdeca72-518f-4c0c-b366-92c57d529b98.png') no-repeat left top / 100% 100%"
				}
			}
		]
	})
	
	onLoad(async ({ activityId, activityDetail, activityChannelId })=>{
		vdata.isLogin = storageManage.isLogin()
		vdata.activityId = activityId
		vdata.activityChannelId = activityChannelId
		// 请求活动详情
		vdata.activityDetail = JSON.parse(decodeURIComponent(activityDetail))
		// 活动动态参数
		activityJson.value = JSON.parse(vdata.activityDetail.activityJson || '{}')
		// 标题更改为活动名称
		uni.setNavigationBarTitle({
			title: vdata.activityDetail.activityName || '越来越邮喜'
		})
		// 判断用户是否登录过
		if (!vdata.isLogin) {
			// 请求奖品列表
			await getAwardList()
			// 加载弹窗打开
			uni.showModal({
				title: '提示',
				content: '请先进行登录注册，再进行参与！',
				success({ cancel }) {
					if (cancel) {
						$infoBox.toast('登录失败，无法正常参与活动！')
					} else {
						gzLoginPopupRef.value.open() // 打开授权弹框
					}
				}
			})
		}else{
			try{
				// 参与活动
				await activityTakePartIn()
			}finally{
				// 请求奖品列表
				await getAwardList()
			}
		}
	})
	onShow(async () => {
		// 已登录 但未拉取用户详情 需要拉取用户详情
		if(!storageManage.userInfo()){
			const { bizData:fansInfo } = await $fansDetail()
			Object.assign(vdata.fansInfo,fansInfo)
		}else{	// 存在用户详情
			Object.assign(vdata.fansInfo,storageManage.userInfo())
		}
	})
	
	/**
	 * 参与活动
	 */
	const activityTakePartIn = async () => {
		const { activityId, activityTemplateNo } = vdata.activityDetail
		await $activityTakePartIn({ activityId, activityTemplateNo, activityChannelId: vdata.activityChannelId })
	}
	
	/**
	 * 请求奖品列表
	 */
	const getAwardList = async () => {
		const { activityId, activityTemplateNo } = vdata.activityDetail
		const { bizData } = await $getActivityAwards({ activityTemplateNo, activityId })
		// 处理奖品数据
		vdata.awardDataAB['A'] = bizData['A']
		vdata.awardDataAB['B'] = bizData['B']
		vdata.moreGiftList.forEach(item => {
			Object.assign(item,bizData[item.remark])
			const { awardType, fansAwardId, awardId } = item
			if(fansAwardId && awardId){
				if(awardType === 0){	// 卡券
					item.url = `/pageUser/myCoupon/viewInfo?fansAwardId=${fansAwardId}&couponId=${awardId}`
				}else if(awardType === 1){	// 实物
					item.url = `/pageUser/myAward/viewInfo?goodsId=${awardId}&fansAwardId=${fansAwardId}`
				}
			}
		})
	}
	
	/**
	 * 登录回调
	 */
	async function isLoginCallback(){
		if(!vdata.isLogin){
			$infoBox.toast('登录失败，无法正常参与活动！')
		}else{
			try{
				// 参与活动
				await activityTakePartIn()
			}finally{
				// 请求奖品列表
				await getAwardList()
			}
		}
	}
	
	/**
	 * 页面跳转
	 */
	function toUrl(url){
		// 用户未登录 给出弹窗
		if(!vdata.isLogin){
			gzLoginPopupRef.value.open() // 打开授权弹框
			return
		}
		if(!url){
			$infoBox.toast('领取失败！')
			return
		}
		uni.navigateTo({
			url
		})
	}
</script>

<style lang="less" scoped>
	.container{
		width: 100%;
		min-height: 100vh;
		background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/08c5ac52-2f7d-463a-b238-c8fe823667d1.png') no-repeat top left / 750rpx 810rpx, #F63A18;
		overflow: hidden;
		position: relative;
		
		.title{
			margin-top: 46rpx;
			text-align: center;
			font-size: 112rpx;
			color: #FEF3DD;
			font-family:YouSheBiaoTiHei;
			/* 单个阴影：水平偏移 | 垂直偏移 | 模糊半径 | 颜色 */
			text-shadow: 1px 1px 2px #FF5E1E;
		}
		
		.sub-title{
			text-align: center;
			color: #D63727;
			font-size: 36rpx;
			background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 20%,#FFE1AC 30%,#FFE1AC 70%,rgba(255,255,255,0) 80%, rgba(255,255,255,0) 100%);
			padding: 5rpx 0;
			letter-spacing: 5rpx;
		}
		
		.content{
			border: 4rpx solid #FF5324;
			box-shadow: 0px 0px 0px 4rpx #D5120F inset;
			border-radius: 18rpx;
			background: #FFFFFF;
			// overflow: hidden;
			overflow: visible;
			margin: 466rpx 32rpx 0;
			padding: 0 4rpx 44rpx 4rpx;
			overflow: hidden;
			.coin{
				// width: 104rpx;
				// height: 100rpx;
				position: absolute;
				// top: -38rpx;
				// right: 6rpx;
			}
			.act-title{
				margin-top: 36rpx;
				width: 184rpx;
				height: 48rpx;
				line-height: 48rpx;
				background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/a7674298-f78f-442e-a9a8-3c09a22c327b.png') no-repeat left top / 100% 100%;
				text-align: center;
				color: #FFFFFF;
				font-weight: bold;
			}
			
			.block{
				margin: 26rpx auto 0;
				width: 622rpx;
				height: 274rpx;
				background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/808e0c65-7ef3-4a05-bdc4-b8d92bc910d6.png') no-repeat left top / 100% 100%;
				padding: 24rpx 56rpx 34rpx 48rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				.top{
					display: flex;
					gap: 36rpx;
					.left{
						margin-top: 14rpx;
						width: 122rpx;
						height: 110rpx;
						background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/8d00a020-bdaa-4e39-a08d-e75d5c3742a6.png') no-repeat top left / 100% 100%;
						text-align: center;
						padding-top: 22rpx;
						box-sizing: border-box;
						text{
							color: #FF6637;
							&:nth-child(1){
								font-weight: bold;
							}
							&:nth-child(2){
								font-size: 20rpx;
							}
						}
					}
					.realname-coupon{
						background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/6d6f638b-95cc-438a-a6b9-51d9801a0f70.png') no-repeat top left / 100% 100%;
					}
					.right{
						display: flex;
						flex-direction: column;
						gap: 18rpx;
						.name{
							color: #FD5F39;
							font-weight: bold;
						}
						.time{
							font-size: 26rpx;
						}
					}
				}
				
				.bottom{
					display: flex;
					gap: 40rpx;
					justify-content: flex-end;
					button{
						margin: initial;
						border: none;
						background-color: #FFBF3B;
						padding: 10rpx 16rpx;
						border-radius: 8rpx;
						line-height: initial;
						width: initial;
						display: inline;
						color: #fff;
						font-size: 24rpx;
					}
				}
			}
		
		
			.more-title{
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 20rpx;
				margin-top: 44rpx;
				font-size: 36rpx;
				color: #333;
				font-weight: bold;
				&::before{
					content: '';
					display: block;
					width: 180rpx;
					height: 34rpx;
					background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/b60c82be-1318-439f-8272-6f34d7960616.png') no-repeat left top / 100% 100%;
				}
				&::after{
					content: '';
					display: block;
					width: 180rpx;
					height: 34rpx;
					background: url('https://jdyd-marketing-public.oss-cn-hangzhou.aliyuncs.com/yx/b60c82be-1318-439f-8272-6f34d7960616.png') no-repeat left top / 100% 100%;
					transform: rotateY(180deg);
				}
			}
			.more-gift-list{
				padding: 0 20rpx;
				.more-gift-item{
					margin-top: 40rpx;
					padding: 24rpx;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					gap: 24rpx;
					background-color: #FFF6DB;
					image{
						width: 80rpx;
						height: 80rpx;
						flex-shrink: 0;
					}
					view{
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						flex-grow: 1;
					}
					button{
						flex-shrink: 0;
						margin: initial;
						border: none;
						background-color: #FFBF3B;
						padding: 10rpx 16rpx;
						border-radius: 8rpx;
						line-height: initial;
						width: initial;
						display: inline;
						color: #fff;
						font-size: 24rpx;
					}
				}
			}
		}
	}
	
</style>